<template>
  <div ref="myLine"></div>
</template>
<script>
let echarts = require('echarts/lib/echarts');
  export default {
    name: 'myLine',
    //props: ['xdata','ydata','ydata1'],
    data () {
      return {
        miao:0,
        xdata:[],
        ydata:[],
        ydata1:[],
      }
    },
    created () {
      
    },
    mounted() {
      this.getDoublePull();
      setInterval(this.getLineData,60*1000);
      setInterval(this.jishi,1000);
    },
    methods: {
      drawLine() {
        var _this=this;
        let dom= this.$refs.myLine;
        let myLine = echarts.init(dom);
        // 绘制图表
        myLine.setOption({
          textStyle: {
            color:'#fff',
          },
          // title: {
          //   text: '设备开机率Top5',//_this.title
          //   x:'center',
          //   subtext:'单位 %',//_this.subtitle
          //   textStyle: {
          //     color: '#003d74',
          //     fontSize:20,
          //   },
          //   top: '40px',
          //   subtextStyle: {
          //     color: '#a0a0a0',
          //     fontSize: 15,
          //   },
          // },
          legend: {
            data:['主挤出机','副挤出机'],
            top:'20px',
            textStyle: {
              color: '#fff',
            },
          },
          grid: {
            left: '5%',right: '5%',bottom:'60px',
          },
          tooltip: {},
          xAxis: {
            //interval:100,
            data: _this.xdata,//["J0009", "J0102", "J0002", "J0001", "J0101"]
            name: '时间',
            boundaryGap: false,
            nameLocation: 'end',
            axisLine: {
              show:true,
              lineStyle: {
                color: '#31b7dd',
                width: 2,
              },
            },
            axisTick: {show:false,},
            splitLine: {
              show: true,
              interval: 'auto',
              lineStyle: {
                color: ["#629fc2"],
                type: 'dashed',
              },
            },
            axisLabel: {
              //align:'left',
            },
          },
          yAxis: {
            name: '工艺压力',
            nameLocation: 'end',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#31b7dd',
                width: 2,
              },
            },
            axisTick: {show:false,},
            splitLine: {
              show: true,
              interval: 'auto',
              lineStyle: {
                color: ["#629fc2"],
                type: 'dashed',
              },
            },
          },
          series: [
            {
              name: '主挤出机',
              type: 'line',
              data: _this.ydata,//[64,42,23, 10, 10],
              itemStyle: {
                color:'#0cd288',
              },
              label: {
                show:false,
                position: 'top',
                color: '#fff',
              },
            },
            {
              name: '副挤出机',
              type: 'line',
              data: _this.ydata1,//[34,44,53, 70, 40],
              itemStyle: {
                color:'#ff92e7',
              },
              label: {
                show:false,
                position: 'top',
                color: '#fff',
              },
            },
          ]
        });
        
      },
      getDoublePull(){
        var _this=this;
        this.$ajax.post(this.url+'/Home/DoublePull?type=0').then(res => {
          console.log('status',res.status);
          if(res.status == 200){
            console.log(res.data);
            res.data.forEach(function(i){
              //console.log(i);
              _this.xdata.push(i.date);
              _this.ydata.push(i.fzgyyl);
              _this.ydata1.push(i.ffgyyl);
            });
            //this.drawLine();
            this.getLineData();
          }
          
        }).catch(error => {
          console.log(error);
        })
      },
      getLineData(){
        //clearInterval();
        var _this=this;
        this.loading=true;
        this.$ajax.post(this.url+'/Home/DoublePull?type=1').then(res => {
          console.log('status',res.status);
          if(res.status == 200){
            this.loading=false;
            console.log(res.data);
            console.log('xdata',this.xdata)
            console.log('ydata',this.ydata)
            console.log('ydata1',this.ydata1)
            res.data.forEach(function(i){
              console.log(i);
              _this.xdata.push(i.date);
              _this.ydata.push(i.fzgyyl);
              _this.ydata1.push(i.ffgyyl);
            });
            this.drawLine();
          }
          
        }).catch(error => {
          console.log(error);
          window.location.reload();
        })
      },
      jishi(){
        if(this.miao==60){
          this.miao=1;
        }else{
          this.miao=this.miao+1;
        }
        console.log('miao',this.miao)
      }
    }
  }
</script>
<style scoped>
</style>
